import Taro from '@tarojs/taro';
import {Image, View} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {request, unite} from '../../../utils/index';
import SelectList from "../../../components/select-list/selectList";
import None from "../../../asset/images/none.png";
import daijx from "../../../asset/myImages/daijx.png";
import Model from "../../../../src/components/modal/Modal";
import yijs from "../../../asset/myImages/yijs.png";
import './myArranging.scss';

class MyCoupon extends Taro.Component {
    config = {
        navigationBarTitleText: '查看排课',
        navigationBarBackgroundColor: '#F6F7F7',
    };

    state = {
        dataList: [], //数据
        classDate: '', //时间选择
        ModelStatus: false,
        kcId: '',
        kcTitle: ''
    };

    componentDidShow() {
        const {setClassDate} = this.props;
        this.setState({
            classDate: setClassDate
        }, () => {
            this.init();
        })
    }

    init = () => {
        const {classDate} = this.state;
        const params = {
            url: '/wx/coach/myDispachClassInfo',
            data:{
                classDate: classDate,
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            dataList: res.data,
                        })
                    }
                }
            }
        })
    };

    //时间选择
    getTimers = (time) => {
        console.log(time);
        this.setState({
            classDate: time,
        }, () => {
            this.init();
        })
    };

    //跳转地图
    goToMap = (roomName, address, latitude, longitude, e) => {
        e.stopPropagation(); //防止父级点击事件干扰
        if (latitude) {
            Taro.openLocation({
                latitude: Number(latitude),
                longitude: Number(longitude),
                name: roomName,
                address: address
            })
        } else {
            unite.showToast('该店铺暂无经纬度');
        }
    };

    getModelUp = (id, time, timeEnd) => {
        this.setState(prevState => ({
            ModelStatus: !prevState.ModelStatus,
            kcId: id,
            kcTitle: time + '-' + timeEnd,
        }))
    };

    confirms = () => {
        const {kcId} = this.state;
        const params = {
            url: '/wx/coach/cancelDispachClass?dispatchId='+kcId,
            data:{
                dispatchId: kcId,
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    unite.showToast('取消成功');
                    this.getModelUp();
                    this.init();
                }
            }
        })
    };

    render() {
        const {dataList, ModelStatus, kcTitle} = this.state;
        return (
            <View className="myPage">
                <View className="select-list">
                    <SelectList onTimer={this.getTimers}/>
                </View>
                <View className="content-list-wrap">
                    {dataList.length != 0 ? (
                        <View className="list-wrap-next">
                            {dataList.map((item, index) => (
                                <View className="list-wrap" key={index}>
                                    <View className="list-top flex-lr">
                                        <View className="shop-name">{item.resRoom.roomName}</View>
                                        <View className="flex-r" onClick={this.goToMap.bind(this, item.resRoom.roomName,item.resRoom.address,item.resRoom.latitude, item.resRoom.longitude)}>
                                            <View>查看地图</View>
                                            <View className="arrow"></View>
                                        </View>
                                    </View>
                                    {item.dispatchClassDetails.map((value, is) => (
                                        <View className="goods-list flex-top" key={is}>
                                            <Image className="goods-img" src={value.avatar}/>
                                            <View className="goods-detail">
                                                <View className="goods-name text-overflow">{value.className}</View>
                                                <View className="flex-l">
                                                    <View className="goods-time">{value.classBeginTime +'-'+ value.classEndTime}</View>
                                                    {/*<View>¥256/节</View>*/}
                                                </View>
                                                <View className="flex-l text-overflow">
                                                    <View className="goods-gg flex-center">{value.classScaleName}</View>
                                                    <View className="price">¥{value.price}/节</View>
                                                    {/*{value.labelNames.map((items, indexs) => (*/}
                                                    {/*    <View className="gg-item flex-center" key={indexs}>{items}</View>*/}
                                                    {/*))}*/}
                                                </View>
                                            </View>
                                            {value.payStatus == 1 &&(
                                                <Image mode="widthFix" className="goods-status" src={daijx}/>
                                            )}
                                            {value.payStatus == 0 &&(
                                                <View className="goods-status-btn flex-center" onClick={this.getModelUp.bind(this, value.dispatchId, value.classBeginTime, value.classEndTime)}>取消排课</View>
                                            )}
                                        </View>
                                    ))}
                                </View>
                            ))}
                        </View>
                    ) : (
                        <View className="none-wrap-page">
                            <Image className="none-img" src={None}/>
                            <View>暂无课程</View>
                            <View className="none-btn" onClick={() => {Taro.navigateTo({url: '../arranging-coursey/arrangingCoursey'})}}>去排课</View>
                        </View>
                    )}
                </View>
                {ModelStatus &&(
                    <Model
                        messageText={kcTitle}
                        onCancel={this.getModelUp}
                        onConfirm={this.confirms}
                    />
                )}
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {setClassDate} = state;
    return {
        setClassDate
    }
};

const mapDispatchToProps = {
};

export default connect(mapStateToProps, mapDispatchToProps)(MyCoupon);



